<template>
	<view>
		<view class="tab">
			<view class="jx-bar">
				<view class="jx-bar-list" v-for="(item, index) in tabList" :key="index">
					<view class="jx-action" :class="item.rShow?'jx-center-action':''" @tap="headerClick(item)">
						<view :class="item.rShow?'jx-center-btn':''">
							<view v-if="!item.rShow">
								<image v-if="tabActive != index"  class="jx-tab-image" :src="item.imageUrl"></image>
								<image v-else class="jx-tab-image" :src="item.imageActiveUrl"></image>

								<view class="iconfont" :class="item.iconfontText&&tabActive === index?'text-sky':''"
									v-if="item.isIconfont"></view>

								<view class="jx-bar-tip" :class="tabActive === index?'text-sky':''">{{item.lableText}}
								</view>
							</view>
							<view v-else>
								<image v-if="tabActive != index" class="jx-tab-image"
									:style="'height:'+imgHw+';width:'+imgHw" :src="item.imageUrl"></image>
								<image v-else class="jx-tab-image" :style="'height:'+imgHw+';width:'+imgHw"
									:src="item.imageActiveUrl"></image>

								<view class="iconfont" :class="item.iconfontText&&tabActive === index?'text-sky':''"
									v-if="item.isIconfont"></view>

								<view class="jx-bar-tip" :class="tabActive === index?'text-sky':''">{{item.lableText}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="null-tab" :style="'height:'+height"></view>
	</view>
</template>

<script>
	/**
	 * jx-tab 底部导航组件
	 * @description 底部导航组件描述
	 * @property {Array} tabList 导航数据数组
	 * {
		 * @property {String} typeStr 类型：用于区分位置，唯一
		 * @property {Boolean} rShow 是否显示中心
		 * @property {Boolean} isImg 是否显示图片
		 * @property {Boolean} isIconfont 是否使用字体iconfont，自主调试使用
		 * @property {String} imageUrl 图片路径
		 * @property {String} imageActiveUrl 图片选中路径
		 * @property {String} iconfontText 字体
		 * @property {String} lableText 标题
	 }
	 * @property {String} height 占位高度
	 * @property {Number} tabActive 选中位置
	 * @property {String} imgHw t图片高度、宽度
	 * @event {Function} headerClick 点击组件触发事件
	 */
	export default {
		props: {
			tabList: {
				type: Array,
				default: () => {
					return [{
						typeStr: 'home',
						rShow: false,
						isImg: true,
						isIconfont: false,
						imageUrl: '/uni_modules/jx-tab/static/index1.png',
						imageActiveUrl: '/uni_modules/jx-tab/static/index11.png',
						iconfontText: '',
						lableText: '首页',
						index:0
					}, 
					// {
					// 	typeStr: 'center',
					// 	rShow: true,
					// 	isImg: true,
					// 	isIconfont: false,
					// 	imageUrl: '../image/视频.png',
					// 	imageActiveUrl: '../image/视频-选中.png',
					// 	iconfontText: '',
					// 	lableText: '中心'
					// },
					{
						typeStr: 'user',
						rShow: false,
						isImg: true,
						isIconfont: false,
						imageUrl: '/uni_modules/jx-tab/static/index2.png',
						imageActiveUrl: '/uni_modules/jx-tab/static/index22.png',
						iconfontText: '',
						lableText: '个人中心',
						index:1
					}]
				}
			},
			height: {
				type: String,
				default: '200rpx'
			},
			imgHw: {
				type: String,
				default: '62rpx'
			},
			// tabActive: {
			// 	type: Number,
			// 	default: 0
			// },
		},
		data(){
				
			return{
				tabActive:0
			}
		},
		methods: {
			headerClick(obj) {
				// console.log(obj)
				this.$emit('tabTap', obj),
				this.tabActive=obj.index
			}
		},
	}
</script>

<style scoped lang="less">
	.tab {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 997;
		box-shadow: 0rpx 0rpx 20rpx 4rpx rgba(0, 0, 0, 0.1);

		.jx-bar {
			min-height: 106rpx;
			background-color: #ffffff;
			display: flex;
			position: relative;
			align-items: center;
			justify-content: space-between;
			height: calc(100rpx + env(safe-area-inset-bottom) / 2);
			padding-bottom: calc(env(safe-area-inset-bottom) / 2);
			padding: 0;
			color: #666666;

			.jx-bar-list {
				flex: 1;
				height: auto;
				line-height: 1;

				.jx-bar-tip {
					font-size: 24rpx;
				}

				.jx-tab-image {
					width: 45rpx;
					height: 45rpx;
					margin-bottom: 8rpx;
				}

				.text-sky {
					color: #3191ec;
				}

				.jx-action {
					font-size: 22rpx;
					position: relative;
					text-align: center;
					padding: 0;
					display: block;
					height: auto;
					line-height: 1;
					margin: 0;
					background-color: white;
					overflow: initial;
				}

				.jx-action::before {
					content: " ";
					width: 200%;
					height: 200%;
					position: absolute;
					top: 0;
					left: 0;
					transform: scale(0.5);
					transform-origin: 0 0;
					border-right: 2rpx solid rgba(0, 0, 0, 0.1);
					z-index: 3;
				}

				.jx-center-action {
					font-size: 22rpx;
					position: relative;
					flex: 1;
					text-align: center;
					padding: 0;
					display: block;
					height: auto;
					line-height: 1;
					margin: 0;
					background-color: white;
					overflow: initial;
					z-index: 2;
					padding-top: 50rpx;
				}

				.jx-center-action::after {
					content: "";
					position: absolute;
					width: 106rpx;
					height: 106rpx;
					top: -52rpx;
					left: 0;
					right: 0;
					margin: auto;
					box-shadow: 0 -6rpx 8rpx rgba(0, 0, 0, 0.1);
					border-radius: 52rpx;
					background-color: white;
					z-index: 0;
				}

				.jx-center-action::before {
					content: "";
					position: absolute;
					width: 106rpx;
					height: 32rpx;
					bottom: 32rpx;
					left: 0;
					right: 0;
					margin: auto;
					background-color: inherit;
					z-index: 1;
				}

				.jx-center-btn {
					position: absolute;
					z-index: 2;
					border-radius: 50%;
					font-size: 20rpx;
					top: -34rpx;
					left: 0;
					right: 0;
					margin: auto;
					padding: 0;
				}
			}
		}

		.iconText {
			margin-top: 0rpx;
			margin-bottom: 16rpx;
			font-size: 40rpx;
		}
	}

	.null-tab {
		width: 100%;
		height: 100px;
	}
</style>